import './style.css'
import typescriptLogo from './typescript.svg'
import viteLogo from '/vite.svg'
import { setupCounter } from './counter.ts'

document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="${viteLogo}" class="logo" alt="Vite logo" />
    </a>
    <a href="https://www.typescriptlang.org/" target="_blank">
      <img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
    </a>
    <h1>Vite + TypeScript</h1>
    <div class="card">
      <button id="counter" type="button"></button>
    </div>
    <p class="read-the-docs">
      Click on the Vite and TypeScript logos to learn more
    </p>
  </div>
`

setupCounter(document.querySelector<HTMLButtonElement>('#counter')!)

// 创建要执行的动态代码
const dynamicCode = `
  <html>
  <head>
    <title>Dynamic HTML</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <script>
      // 在动态创建的 HTML 中执行 JavaScript 代码
      alert('This is dynamic code!');
    </script>
  </body>
  </html>
`;

// 创建一个按钮来触发动态代码的执行
const button = document.createElement('button');
button.textContent = 'Open Dynamic HTML';
button.addEventListener('click', () => {
  // 使用 window.open() 在新窗口或标签页中打开动态代码
  const newWindow: any = window.open();
  newWindow.document.open();
  newWindow.document.write(dynamicCode);
  newWindow.document.close();
});

document.body.appendChild(button);
